<template>
  <div class="container-box" id="container-box">
    <el-form :inline="true" :model="filter" class="form-inline">
      <el-form-item label="状态：">
        <el-select v-model="filter.active" clearable>
          <el-option label="禁用" value="0"></el-option>
          <el-option label="可用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="product_name"
        label="名称"
        width="180">
      </el-table-column>
      <!-- <el-table-column
        prop="product_price"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="product_inventory"
        label="库存">
      </el-table-column> -->
      <el-table-column
        prop="active"
        label="状态"
        :formatter="activeFormat">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="最后更新时间"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="totalCount"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
import { timestampToDate } from "../../assets/js/utils";

export default {
  data() {
    return {
      filter: {
        active: ""
      },
      params: {
        "access-token": window.localStorage.getItem("token")
      },
      tableData: [],
      totalCount: 0,
      currentPage: 1,
      perPage: 10
    };
  },
  created: function() {
    this.getProduct();
  },
  methods: {
    getProduct: function() {
      this.axios.get("products", { params: this.params }).then(res => {
        this.tableData = res.data.data ? res.data.data.item : [];
        this.totalCount = res.data.data ? res.data.data._meta.totalCount : 0;
      });
    },
    deleteRole: function(product_id) {
      let token = window.localStorage.getItem("token");
      this.axios
        .delete("products/" + product_id, { params: { "access-token": token } })
        .then(res => {
          if (res.data.code !== "1000") {
            this.$message({
              type: "error",
              message: res.data.message
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功!"
            });

            this.getProduct();
          }
        });
    },
    dateFormat: function(row, column) {
      let date = row[column.property];
      if (date === undefined) {
        return "";
      } else {
        return timestampToDate(date);
      }
    },
    activeFormat: function(row, column) {
      let active = row[column.property];
      return parseInt(active) ? "可用" : "禁用";
    },
    handleEdit: function(row) {
      this.$router.push({
        path: "/Product/ProductEdit/" + row.product_id
      });
    },
    handleAdd: function() {
      this.$router.push({
        path: "/Product/ProductAdd"
      });
    },
    handleDelete: function(row) {
      this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteRole(row.product_id);
        })
        .catch(() => {});
    },
    onSubmit() {
      this.filter.active
        ? this.$set(this.params, "active", this.filter.active)
        : this.$delete(this.params, "active");

      this.getProduct();
    },
    handleCurrentChange: function(page) {
      this.$set(this.params, "page", page);
      this.$set(this.params, "per-page", this.perPage);
      this.getProduct();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
